<script setup>
import {ref} from "vue";
import {getSourceTreeApi} from '@/service/source.js';
import {getOpenedCityListApi} from '@/service/zone.js';
import {uploadMemberApi} from "@/service/member.js";
import {ElMessage} from "element-plus"; // 引入提示

const env = import.meta.env;
const action = env.VITE_API_URL + '/api/system.file/upload';
const headers = {
  Authorization: localStorage.getItem('token') || ''
};

// 定义emit
const emit = defineEmits(['reload']);

function reload() {
  emit('reload');
}

const visible = ref(false);

const formRef = ref(null);
const ruleForm = ref({
  city_id: '',
  source_id: '',
  name: '',
  path: '',
  dir_path: '',
  size: 0,
  extname: '',
  type: '',
  hash: ''
});

const rules = ref({
  city_id: [
    {required: true, message: '请选择城市', trigger: 'change'}
  ],
  source_id: [
    {required: true, message: '请选择渠道', trigger: 'change'}
  ]
});
const uploadRef = ref(null);

// init form
const initForm = () => {
  ruleForm.value = {
    city_id: '',
    source_id: '',
    name: '',
    path: '',
    dir_path: '',
    size: 0,
    extname: '',
    type: '',
    hash: ''
  };
  // 清空上传文件
  if (uploadRef.value)  {
    uploadRef.value.clearFiles();
  }
};

const sourceTree = ref([]);
const fetchSourceTree = () => {
  getSourceTreeApi().then(res => {
    sourceTree.value = res.data.tree;
  });
};

const openedList = ref([]);
const fetchOpenedList = () => {
  getOpenedCityListApi().then(res => {
    if (res.code === 200) {
      openedList.value = res.data.list;
    }
  });
};

const openDialog = () => {
  visible.value = true;
  initForm();
  fetchSourceTree();
  fetchOpenedList();
}

const closeDialog = () => {
  visible.value = false;
  initForm();
}

const handleSave = () => {
  // 确认上传提示
  uploadMemberApi(ruleForm.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('上传成功');
      closeDialog();
      reload();
    } else {
      ElMessage.error(res.message);
    }
  });
}

// 上传文件
const submitUpload = () => {
  uploadRef.value.submit();
}

const onUploadSuccess = (res) => {
  ruleForm.value.name = res.data.name;
  ruleForm.value.path = res.data.path;
  ruleForm.value.dir_path = res.data.dir_path;
  ruleForm.value.size = res.data.size;
  ruleForm.value.extname = res.data.extname;
  ruleForm.value.type = res.data.type;
  ruleForm.value.hash = res.data.hash;
}

defineExpose({
  openDialog
});
</script>

<template>
  <el-dialog v-model="visible" title="导入客资" width="30%">
    <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" label-position="top">
      <el-form-item label="城市" prop="city_id">
        <el-select v-model="ruleForm.city_id" placeholder="请选择城市" clearable>
          <el-option
              v-for="item in openedList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="source_id">
        <el-cascader v-model="ruleForm.source_id" :options="sourceTree"
                     :props="{label:'title', value:'id' ,checkStrictly: true, emitPath: false }"
                     placeholder="请选择父级渠道"
                     style="width:100%"></el-cascader>
      </el-form-item>

      <el-form-item label="上传文件" prop="file">
        <el-upload
            ref="uploadRef"
            :action="action"
            :headers="headers"
            accept=".txt"
            :auto-upload="false"
            :on-success="onUploadSuccess"
            :multiple="false"
            :limit="1"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <el-button class="ml-3" type="success" @click="submitUpload">上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              txt文件
            </div>
          </template>
        </el-upload>
      </el-form-item>

    </el-form>
    <el-button type="primary" @click="handleSave">上传</el-button>
    <el-button @click="closeDialog">取消</el-button>
  </el-dialog>
</template>

<style scoped>
.ml-3 {
  margin-left: 6px;
}
</style>